<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-common-layout">
      <div class="JNPF-preview-main"
           style="background-color: rgb(240,242,245)!important;color: black!important;font-weight: 500">

        <el-page-header @back="goBack" content="收支记录"/>
        <el-row :gutter="10" class=" main" :style="{margin: '0 auto',width: '100%'}">
          <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right">
            <template v-if="!loading">
              <el-card>
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <JNPF-Text :style='{"width":"100%"}'
                               :textStyle='{"color":"#000000","font-weight":"bold","text-decoration":"none","font-size":18,"line-height":32,"font-style":"normal","text-align":"left"}'
                               :value="'基本信息(收支单号'+dataForm.transactionNo+')'" :closable="false"
                    >
                    </JNPF-Text>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-row :gutter="15">
                    <el-col :span="6">
                      <el-form-item label="账单编号"
                                    prop="billNo"
                      >
                        <p>{{ dataForm.billNo }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="本次交易金额"
                                    prop="transactionAmount"
                      >
                        <p>{{ dataForm.transactionAmountSum }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="交易日期"
                                    prop="transactionTime"
                      >
                        <p>{{ dataForm.transactionTime }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="支付方式"
                                    prop="paymentMethod"
                      >
                        <p>{{ dataForm.paymentMethod }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="支付单号"
                                    prop="paymentNo"
                      >
                        <p>{{ dataForm.paymentNo }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="付款方"
                                    prop="payer"
                      >
                        <p>{{ dataForm.payer }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="付款账户"
                                    prop="payerAccount"
                      >
                        <p>{{ dataForm.payerAccount }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="凭证"
                                    prop="voucher"
                      >
                        <JNPF-UploadFz v-model="dataForm.voucher"
                                       disabled
                                       detailed :fileSize="10" sizeUnit="MB" :limit="9" buttonText="点击上传"
                        >
                        </JNPF-UploadFz>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="凭证状态"
                                    prop="voucherStatus"
                      >
                        <p>{{ dataForm.voucherStatus }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="是否生成收据"
                                    prop="ireceipt"
                      >
                        <p>{{ dataForm.ireceipt }}</p>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-card>
              <el-card class="bottom_card">
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <JNPF-Text :style='{"width":"100%"}'
                               :textStyle='{"color":"#000000","font-weight":"bold","text-decoration":"none","font-size":18,"line-height":32,"font-style":"normal","text-align":"left"}'
                               value="收款明细" :closable="false"
                    >
                    </JNPF-Text>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <div class="JNPF-common-title">
                      <h2></h2>
                    </div>
                    <el-table border :data="dataForm.zcglcwszitemList" size="mini">
                      <el-table-column type="index" width="50" label="序号" align="center"/>
                      <el-table-column prop="expenseItem" label="费用项">
                        <template slot-scope="scope">
                          <p>{{ scope.row.expenseItem }}</p>
                        </template>
                      </el-table-column>


                      <el-table-column prop="receiveAmount" label="状态">
                        <template slot-scope="scope">
                          <p v-if="scope.row.status == '1'">正常</p>
                          <p v-if="scope.row.status == '2'" style="color:red;">已作废</p>
                        </template>
                      </el-table-column>
                      <el-table-column prop="receiveAmount" label="应收金额">
                        <template slot-scope="scope">
                          <p>{{ scope.row.receiveAmount }}</p>
                        </template>
                      </el-table-column>
                      <el-table-column prop="receivedAmount" label="已收金额">
                        <template slot-scope="scope">
                          <p>{{ scope.row.receivedAmount }}</p>
                        </template>
                      </el-table-column>
                      <el-table-column prop="unpaidAmount" label="未收金额">
                        <template slot-scope="scope">
                          <p>{{ scope.row.unpaidAmount }}</p>
                        </template>
                      </el-table-column>
                      <el-table-column prop="transactionAmount" label="本次交易金额">
                        <template slot-scope="scope">
                          <p>{{ scope.row.transactionAmount }}</p>
                        </template>
                      </el-table-column>
                      <el-table-column prop="billNo" label="票据号">
                        <template slot-scope="scope">
                          <p>{{ scope.row.billNo }}</p>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                          <el-button style="color: red" v-show="scope.row.status == '1'" size="mini" type="text"
                                     class="JNPF-table"
                                     @click="deleteT(scope.$index)"
                          >作废
                          </el-button>

                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
              </el-card>
            </template>
          </el-form>
        </el-row>
        <!--      <JNPF-Form v-if="formVisibleBill" ref="JNPFFormBill" @refresh="refresh"/>-->
        <!--      <BillReduce v-if="formVisible" ref="JNPFFormBillReduce" @refresh="refresh"/>-->
        <!--      <BillCollection v-if="formVisibleBill" ref="JNPFFormBill" @refresh="refresh"/>-->
      </div>
    </div>
  </transition>
</template>
<script>
import request from '@/utils/request'
import PrintBrowse from '@/components/PrintBrowse'
import jnpf from '@/utils/jnpf'
import StyleScript from '@/components/Generator/index/StyleScript'

export default {
  components: {StyleScript, PrintBrowse},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: '',
      id: '',
      billId: '',
      dataForm: {
        id: '',
        billNo: '',
        transactionAmount: '',
        transactionTime: '',
        paymentMethod: '',
        paymentNo: '',
        payer: '',
        payerAccount: '',
        voucher: [],
        voucherStatus: '',
        ireceipt: '',
        billId: '',
        zcglcwszitemList: []
      }

    }
  },
  computed: {},
  watch: {},
  created() {
    // this.id = this.$route.query.id
    // this.billId = this.$route.query.billId
    //
    // this.init(this.id)
  },
  mounted() {
  },
  methods: {
    parseCurrency(formattedValue) {
      // 去除货币符号、千位分隔符和空格
      const cleanedValue = formattedValue.replace(/[￥¥, ]/g, '');
      // 将字符串转换为数值
      const value = parseFloat(cleanedValue);
      // 检查是否成功转换为数值
      if (isNaN(value)) {
        throw new Error('无法将格式化的货币字符串转换为数值');
      }
      return value;
    },
    formatCurrency(value) {
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY'
      }).format(value);
    },
    goBack(isRefresh) {
      this.$emit('close', isRefresh)
      // this.$router.push(`/zcgl/zcglcwsz/index`)
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.voucher = _dataAll.voucher ? JSON.parse(_dataAll.voucher) : []
      for (let i = 0; i < _dataAll.zcglcwszitemList.length; i++) {
        var _list = _dataAll.zcglcwszitemList[i]
      }
      this.dataForm = _dataAll
      this.dataForm.transactionAmountSum = this.formatCurrency(this.dataForm.transactionAmountSum)
      this.dataForm.zcglcwszitemList.forEach(i => {
        i.transactionAmount = this.formatCurrency(i.transactionAmount)
        i.unpaidAmount = this.formatCurrency(i.unpaidAmount)
        i.receivedAmount = this.formatCurrency(i.receivedAmount)
        i.receiveAmount = this.formatCurrency(i.receiveAmount)
      })
    },
    deleteT(data) {
      var that = this
      // 弹出确认框，提示用户是否确认删除
      this.$confirm('确定要作废这条记录吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户确认删除后，执行删除操作

        this.dataForm.zcglcwszitemList.forEach(i => {
          i.transactionAmount = this.parseCurrency(i.transactionAmount)
          i.unpaidAmount = this.parseCurrency(i.unpaidAmount)
          i.receivedAmount = this.parseCurrency(i.receivedAmount)
          i.receiveAmount = this.parseCurrency(i.receiveAmount)
        })

        var form = {
          receivedAmount: this.dataForm.zcglcwszitemList[data].receivedAmount,
          unpaidAmount: this.dataForm.zcglcwszitemList[data].unpaidAmount,
          transactionAmount: this.dataForm.zcglcwszitemList[data].transactionAmount,
          billId: this.billId,
          expenseItem: this.dataForm.zcglcwszitemList[data].expenseItem,
          id: this.dataForm.zcglcwszitemList[data].id,
        };

        request({
          url: '/api/example/ZcglCwSz/nullify',
          data: form,
          method: 'POST'
        }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            onClose: () => {

            }
          });

          that.init(that.id);
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '删除失败，请重试！'
          });
        });
      }).catch(() => {
        // 用户取消删除操作
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    initC(id, billId) {
      this.dataForm.id = id || 0
      this.visible = true
      this.billId = billId
      this.id = id
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/ZcglCwSz/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    },
    init(id) {
      this.dataForm.id = id || 0
      this.id = id
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/ZcglCwSz/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    }
  }
}

</script>
<style scoped>

/* 增加表格行高 */
/deep/ .el-table .el-table__row {
  height: 60px; /* 你想要的行高 */
  border: 1px slategrey solid;
}

/* 如果你还想要调整单元格内部的垂直居中 */
/deep/ .el-table .cell {
  height: 60px; /* 和行高一致 */
  line-height: 60px; /* 垂直居中文本 */

}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {

  margin-bottom: 8px !important;
}


/* 响应式布局 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px; /* 调整左右边距 */
  }
}

.bottom_card {
  margin-top: 15px;
}
</style>
